<template>
  <div class="shop">
    <div class="top">
      <section class="left">
        <div class="el-icon-arrow-left" @click="back">返回</div>
        <img
          :src="'https://elm.cangdu.org/img/' + this.shop.image_path"
          alt=""
        />
      </section>
      <div class="gray"></div>
      <div
        class="bg"
        :style="{
          background:
            'url(https://elm.cangdu.org/img/' + this.shop.image_path + ')',
        }"
      ></div>
      <section class="right">
        <span class="el-icon-arrow-right" @click="jumpShopDetail"></span>
        <p v-text="this.shop.name" class="title"></p>
        <p class="time">
          <span
            v-text="'商家配送 ' + this.shop.order_lead_time + ' 分钟送达 /'"
          ></span>
          <span v-text="'配送费￥' + this.shop.float_delivery_fee"></span>
        </p>
        <p class="notice" v-text="'公告：' + this.shop.promotion_info"></p>
      </section>
    </div>
    <!-- tab栏 -->
    <!-- 内容1 -->
    <van-tabs v-model="active">
      <van-tab title="商品">
        <van-tree-select
          height="110vw"
          :items="items"
          :main-active-index.sync="active1"
        >
          <template #content>
            <div
              class="card"
              v-for="(v, i) in shopName"
              :key="i"
              v-if="active1 === i"
            >
              <van-card
                v-for="(v1, i1) in v.foods"
                :key="i1"
                :price="v1.specfoods[0].price"
                :desc="v1.description"
                :title="v1.name"
                :thumb="'https://elm.cangdu.org/img/' + v1.image_path"
                class="cardDetail"
              >
                <template #tags>
                  <div class="tips" v-text="v1.tips"></div>
                </template>
                <!-- 底部加减的插槽 -->
                <template #footer>
                  <el-button
                    v-if="!v1.count"
                    type="primary"
                    icon="el-icon-plus"
                    circle
                    @click="addKey(i,i1)"
                    size="mini"
                  ></el-button>
                  <el-input-number
                    v-else
                    size="small"
                    v-model="v1.count"
                    :min="1"
                    :max="10"
                    @change="handleChange"
                  ></el-input-number>
                </template>
              </van-card>
            </div>
          </template>
        </van-tree-select>
        <van-submit-bar :price="3050" button-text="去结算" @submit="onSubmit" />
      </van-tab>
      <!-- 内容2 -->
      <van-tab title="评价">
        <div class="allScore">
          <div class="sLeft">
            <p v-text="scoreObj.overall_score.toFixed(1)" class="score"></p>
            <p class="zcomment">综合评价</p>
            <p
              v-text="
                '高于周边商家' +
                (scoreObj.compare_rating * 100).toFixed(1) +
                '%'
              "
              class="compare"
            ></p>
          </div>
          <div class="sRight">
            <p>
              服务态度
              <el-rate
                v-model="scoreObj.service_score.toFixed(1)"
                disabled
                show-score
                class="star"
              ></el-rate>
            </p>
            <p>
              菜品评价
              <el-rate
                v-model="scoreObj.food_score.toFixed(1)"
                disabled
                show-score
                class="star"
              ></el-rate>
            </p>
            <p>
              送达时间<span
                class="time"
                v-text="scoreObj.deliver_time + '分钟'"
              ></span>
            </p>
          </div>
        </div>
        <div class="scoreList">
          <el-button
            type="primary"
            v-for="(v, i) in scoreList"
            :key="i"
            v-text="v.name + '(' + v.count + ')'"
            :class="{bgc}"
            ref="btn1"
            @click="choosed(i)"
          ></el-button>
        </div>
        <!-- 评价详细 -->
        <div class="detail" v-for="(v, i) in commentDetail" :key="i">
          <div class="toux">
            <img src="https://elm.cangdu.org/img/default.jpg" alt="" />
          </div>
            <div class="userRight">
              <p class="userMsg">
                <span v-text="v.username"></span>
                <span v-text="v.rated_at" class="commentTime"></span>
              </p>
              <p class="starP">
                <el-rate disabled v-model="v.rating_star" class="foodStar"></el-rate>
                <span v-text="v.time_spent_desc" class="foodSpent"></span>
              </p>
              <div class="imgWrap">
              <div
                class="commentImg"
                v-for="(v1, i1) in v.item_ratings"
                :key="i1"
              >
                <img
                  src="https://fuss10.elemecdn.com/0/74/e0e203f613deff4e456c31e4177d1jpeg.jpeg"
                  alt=""
                  class="foodImg"
                />
                <el-tag
                  type="info"
                  v-text="v1.food_name"
                  class="foodName"
                ></el-tag>
              </div>
              </div>
            </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "shop",
  data() {
    return {
      bgc:false,//点击后的背景色
      isChecked: true, //商品可选状态
      active1: 0,
      items: [],
      activeId: 1,
      activeIndex: 0,
      active: 0,
      activeKey: 0,
      //  商品名
      shopName: {},
      shopId: "", //店铺id
      scoreObj: "", //评分信息
      scoreList: "", //评分列表
      commentDetail: "", //评价详细
      shopObj:"",//新增的商品项
    };
  },
  created() {
    // 接受再来一单时的query参数
   console.log(this.$route.query)
    if(this.$route.query){
          this.shopId=this.$route.query
    }
    this.shopId = this.shop.id;
//    console.log(this.shopId);
    this.getShopFoodList();
    this.getScore();
    this.getCommentList();
    this.getCommentDetail();
  },
  methods: {
    //返回
    back() {
      this.$router.back();
    },
    //获取食品列表
    getShopFoodList() {
      let api = this.eleUrl.shopFoodList + "?restaurant_id=" + this.shopId;
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
        console.log(res.data);
        this.shopName = res.data;
        res.data.map((item, index, arr) => {
          this.items[index] = { text: item.name };
          this.items.push(this.items[index]);
        });
      });
    },
    //获取评分
    getScore() {
      let api = this.eleUrl.allscore + this.shopId + "/ratings/scores";
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
        this.scoreObj = res.data;
        //console.log(this.shopId)
        //console.log(api);
      });
    },
    //获取评价分类
    getCommentList() {
      let api = this.eleUrl.allscore + this.shopId + "/ratings/tags";
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
        this.scoreList = res.data;
        //console.log(res.data);
      });
    },
    //获取评价详细
    getCommentDetail() {
      let api = this.eleUrl.allscore + this.shopId + "/ratings";
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
        this.commentDetail = res.data;
        //console.log(res.data);
      });
    },
    //商品列表的点击事件
    onChange() {
      console.log(this.activeKey);
    },
    // 点击添加
    addKey(i,i1){
      this.shopObj =this.shopName[i].foods[i1]
       //该商品项新增一个键值对记录num
      this.shopObj['count']=1;
      console.log(this.shopObj)
    },
    //商品数量的改变
    handleChange(value) {
      console.log(value);
    },
    // 去结算
    onSubmit() {
      console.log(1);
    },
    //跳转到店铺详细
    jumpShopDetail(){
      this.$router.push({
        name:'shopDetail',
      })
    },
    // 点击背景色改变
    choosed(i){
      console.log(this.$refs.btn1[i])
      this.$nextTick(()=>{
          this.$refs.btn1[i].style.color='red'
      })
      
    }
  },
  computed: {
    ...mapState(["shop", "eleUrl"]),
  },
};
</script>

<style scoped>
.shop {
  font-size: 0.15rem;
}
/* 头部 */
.top {
  height: 1.2rem;
  overflow: hidden;
  padding-top: 0.18rem;
}
.allScore {
  overflow: hidden;
}
.left {
  width: 20%;
  height: 2rem;
  float: left;
  margin: 0.1rem;
}
.left > img {
  width: 100%;
}
.right {
  color: white;
  height: 2rem;
}
.title {
  margin-top: 0.1rem;
  font-size: 0.18rem;
}
.time,
.notice {
  font-size: 0.13rem;
  margin-top: 0.15rem;
  font-weight: 200;
}
/* 背景和蒙版 */
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.2rem;
  filter: blur(15px);
  z-index: -2;
}
.gray {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.2rem;
  z-index: -1;
  opacity: 0.4;
  background-color: rgba(31, 16, 48, 0.582);
}
/* 返回 */
.el-icon-arrow-left {
  color: white;
  position: absolute;
  top: 0.12rem;
  left: 0.02rem;
}
.el-icon-arrow-right {
  color: white;
  position: absolute;
  top: 0.3rem;
  right: 0.2rem;
}
/* 评价 */
.sLeft {
  float: left;
  width: 50%;
  line-height: 0.2rem;
  text-align: center;
  color: gray;
  margin-top: 0.1rem;
}
.sRight {
  float: left;
  width: 50%;
  font-size: 0.1rem;
  margin-top: 0.1rem;
}
.score {
  font-size: 0.25rem;
  color: rgb(240, 86, 29);
}
.zcomment {
  font-size: 0.16rem;
}
.compare {
  font-size: 0.1rem;
}
.star {
  display: inline-block;
  font-size: 0.1rem;
}
.star >>> .el-rate__icon {
  font-size: 0.1rem !important;
}
.star >>> .el-rate__text {
  font-size: 0.1rem;
  color: rgba(240, 93, 8, 0.966) !important;
}
.time {
  margin-left: 0.1rem;
}
.scoreList {
  width: 100%;
  margin: 0.1rem;
  display: flex;
  flex-wrap: wrap;
}
.scoreList .el-button {
  margin: 0.05rem;
  padding: 0.06rem;
  width: 0.8rem;
  font-size: 0.07rem;
  background-color: rgb(133, 172, 245);
  border: none;
}
/* 评论详细 */
.detail{
  overflow: hidden;
  padding: .1rem;
  border: .001rem solid rgb(236, 234, 234);
}
.toux{
  width: 20%;
  float: left;
}
.toux img{
  width: 50%;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}
.userRight{
  float: left;
  width:80%
}
.userMsg{
  font-size: .1rem;
  color: gray;
  font-weight: bold;
}
.commentTime{
  float: right;
  margin-right: .1rem;
}
.foodSpent{
  margin-left: .5rem;
  font-size: .1rem;
}
.commentImg{
  float: left;
  width: 20%;
  margin: 0.1rem;
}
.commentImg>img{
  width: 100%;
}
.starP>.el-rate{
  float: left;
}
.starP{
  height: .2rem;
}
.starP>>>.el-rate__item{
  width: .12rem;
}
.foodName{
  display: block;
  width: .6rem;
  height: .2.5rem;
  padding: .01rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bgc{
  background-color: rgb(98, 98, 245) !important;
}

</style>